<template>
  <div>
    <ul>
      <li v-for="(val, index) in arr" :key="index">{{ val }}</li>
    </ul>
    <hr />
    <button @click="sort">排序</button>
    <button @click="reverse">翻转</button>
    <button @click="slice">截取前三位</button>
    <button @click="change">
      改变第<input type="number" v-model.number="n1" />一个数字为<input
        type="number"
        v-model.number="n2"
      />
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 8, 4, 6, 0],
      n1: 0,
      n2: 0,
    };
  },
  methods: {
    sort() {
      this.arr.sort((a, b) => a - b);
    },
    reverse() {
      this.arr.reverse();
    },
    slice() {
      this.arr = this.arr.slice(0, 3);
    },
    change() {
      this.$set(this.arr, this.n1 + 1, this.n2);
    },
  },
};
</script>

<style>
</style>